<template>
	<a-card class="max-w-sm w-full bg-white/75 dark:bg-white/5 backdrop-blur">
		<div class="text-center w-full mb-6 mt-6">
			<p class="text-3xl text-gray-900 dark:text-white font-bold">登录账号</p>
		</div>
		<a-form class="formBox" :labelWrap="true" layout="vertical">
			<a-form-item name="username" label="账号">
				<a-input placeholder="输入账号" size="large" v-model:value="formData.username" />
			</a-form-item>
			<a-form-item name="password" label="密码">
				<a-input-password placeholder="输入密码" size="large" v-model:value="formData.password" />
			</a-form-item>
		</a-form>
		<a-button class="w-full" type="primary" size="large" @click="onSubmit">点击登录</a-button>
	</a-card>
</template>

<script setup lang="ts">
import useHttp from '~~/utils/useHttp';
import { useRouter } from '#app';
import Cookie from 'js-cookie';
import { useAuthStore } from '~/store/auth';

definePageMeta({
	layout: 'auth',
});

useSeoMeta({
	title: '注册账号',
});

const router = useRouter();

const formData = reactive({
	username: 'qhwl',
	password: 'zxc101414',
});

function onSubmit() {
	useHttp({
		url: '/auth/login',
		method: 'post',
		data: formData,
		fetchOptions: { success: '登录成功' },
	}).then((token) => {
		Cookie.set('token', token as any, { expires: 30 });
		router.push('/');
	});
}
</script>

<style lang="less" scoped>
.formBox {
	:deep(.ant-form-item-label label) {
		font-size: 16px;
		color: darkgrey;
		font-weight: 200;
	}
}
</style>
